<!--
 * @Author: wangzm
 * @Date: 2020-03-16 16:01:41
 * @LastEditors: wjk
 * @LastEditTime: 2020-08-17 14:21:38
 * @Description: CustomModules
 -->
<template>
  <view class="module-list">
    <template v-for="(moduleData, index) in list">
      <!-- 锚点导航 -->
      <view v-if="moduleData.module_type===-1" :id="moduleData.module_id" :key="index" class="sticky-wrap" style="top: -2px">
        <anchor-list :module-data="moduleData" :current="current" @itemClick="anchorClick" />
      </view>
      <view v-else :id="moduleData.module_id" :key="index">
        <!-- 轮播海报 -->
        <base-swiper v-if="moduleData.module_type===1" class-name="banner-swiper" :swiper-list="moduleData.content_list" @itemClick="bannerClick"></base-swiper>
        <!-- 平铺固定 -->
        <pic-cover v-else-if="moduleData.module_type===2" :module-data="moduleData" @itemClick="itemClick" />
        <!-- 平铺滑动 -->
        <pic-scroll v-else-if="moduleData.module_type===3" :module-data="moduleData" @itemClick="itemClick" />
        <!-- 商品详细列表 -->
        <goods-list-detail v-else-if="moduleData.module_type===4" :module-data="moduleData" />
        <!-- 商品平铺模式 -->
        <goods-list-cover v-else-if="moduleData.module_type===5" :module-data="moduleData" />
        <!-- 商品滑动模式 -->
        <goods-list-scroll v-else-if="moduleData.module_type===6" :module-data="moduleData" />
        <mole-rich-text v-else-if="moduleData.module_type===7" :content="moduleData.comment" />
      </view>
    </template>
    <pop-pic v-if="showPop && popPicSrc" :src="popPicSrc" @popClick="popClick" @popClose="showPop=false" />
  </view>
</template>
<script>
import baseSwiper from '@/components/base/base-swiper.vue'
import anchorList from './modules/anchorList.vue'
import picCover from './modules/picCover.vue'
import picScroll from './modules/picScroll.vue'
import goodsListDetail from './modules/goodsListDetail.vue'
import goodsListCover from './modules/goodsListCover.vue'
import goodsListScroll from './modules/goodsListScroll.vue'
import moleRichText from './modules/moleRichText.vue'
import popPic from './modules/popPic.vue'
import { toFunctionDetail } from '@/utils/navigateTo'
export default {
  name: 'CustomModule',
  components: {
    baseSwiper,
    anchorList,
    picCover,
    picScroll,
    goodsListDetail,
    goodsListCover,
    goodsListScroll,
    moleRichText,
    popPic
  },
  props: {
    activityId: {
      type: String,
      default() { return '' }
    },
    list: {
      type: Array,
      default() { return [] }
    },
    scrollTop: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      topData: {},
      current: '',
      anchorHeight: 30,
      popPicSrc: '',
      popContent: {},
      showPop: false,
      initCount: 1
    }
  },
  watch: {
    scrollTop() {
      this.initData()
    }
  },
  created() {
    this.initCount = 1
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.initCount < 100 || this.scrollTop === 0) {
        this.initCount++
        const query = uni.createSelectorQuery().in(this)
        const anchorData = this.list.filter(i => i.module_type === -1)
        anchorData.map(item => {
          query.select('#' + item.module_id).boundingClientRect(data => {
            this.anchorHeight = data.height
          }).exec()
          item.content_list.map(sItem => {
            query.select('#' + sItem.connect_id).boundingClientRect(data => {
              if (data) {
                this.topData[sItem.connect_id] = this.scrollTop + data.top
              }
            }).exec()
          })
        })
      }

      let current = ''
      let currentHeight = 0
      const scrollTop = this.scrollTop + this.anchorHeight
      for (const key in this.topData) {
        if (scrollTop >= this.topData[key]) {
          if (!currentHeight || (currentHeight && this.topData[key] > currentHeight)) {
            current = key
            currentHeight = this.topData[key]
          }
        }
      }
      this.current = current
    },
    bannerClick(data) {
      this.itemClick(data.item)
    },
    // 图片点击
    itemClick(item) {
      console.log(item)
      if (item.isPop) {
        this.popContent = item
        this.popPicSrc = item.popPic
        this.showPop = true
      } else {
        if (this.activityId === 'a6a84a2a-5306-46f9-a597-1ccd48036da8') {
          this.$trackSDK.track('bx.38_gift.list.click', '', {
            goods_id: item.type_val,
            goods_name: item.title || item.subtitle
          })
        }
        toFunctionDetail(item)
      }
    },
    popClick() {
      this.showPop = false
      if (this.activityId === 'a6a84a2a-5306-46f9-a597-1ccd48036da8') {
        this.$trackSDK.track('bx.38_gift.dialog.click', '', {
          title: this.popContent.title,
          goods_id: this.popContent.type_val
        })
      }
      toFunctionDetail(this.popContent)
    },
    anchorClick(item) {
      uni.pageScrollTo({
        scrollTop: this.topData[item.connect_id] - this.anchorHeight + 3,
        duration: 0
      })
    }
  }
}
</script>
<style lang="scss">
.custom-module{
  position: relative;
  z-index: 0;
}
.anchor-list{
  color: aqua;
  image{
    display: block;
  }
}
</style>
